<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center">
    <div id="shandian" style="width: 350px;height: 350px;transform: translateY(-20px)" />
  </div>


</template>

<script>
  let echarts = require('echarts')
  export default {
    name: "shandian",
    props:['prop'],
    data(){
      return {
      }
    },

    methods:{
      init(){
        const max = this.prop.data && this.prop.data.length && this.prop.data.reduce((total,ele) => total+= ele.value ,0 ) || 0
        var colorList = [
          '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
          '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
          '#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700'
        ];
       let options = {
          tooltip: {},
          xAxis: {
            show: false,
          },
          yAxis: {
            show: false,
          },
          series: [{
            type: 'graph',
            layout: 'force',
            force: {
              repulsion: 70,
              edgeLength: 10
            },
            label: {
              show: true,
              formatter: [
                '{name|{b}}'
              ].join('\n'),
              rich: {
                title: {
                  fontSize: 14,
                  color: '#fff',
                  textAlign: 'center'
                },
                name: {
                  fontSize: 14,
                  color: '#fff',
                  textAlign: 'center'
                }
              }
            },
            itemStyle: {
              color: function(params) {
                var a =  Math.round(Math.random()*14)
                return colorList[a];
              }
            },
            symbolSize: function(value, params) {
              return 300 * Math.min(0.85,Math.max(value / max,0.15))
            },
            data: this.prop.data
          }]
        };
        let linearBarDom = echarts.getInstanceByDom(document.getElementById('shandian'))
        if(linearBarDom == null){
          linearBarDom = echarts.init(document.getElementById('shandian'))
        }
        linearBarDom.resize()
        linearBarDom.setOption(options,false)

      }
    },
    watch: {
      prop: {
        handler (val) {
          this.init()
        },
        deep: true
      }
    },
    mounted () {
      this.init()
    },

  }
</script>

<style scoped lang="scss">

</style>
